<template>
    <div class="aboutMain">
        <div class="start">
            <h2>关于我们</h2>
            <div class="line_blue"></div>
            <p>专注互联网信息化服务</p>
        </div>
        <div class="nav about">
            <div class="line_left"></div>
            <a href="/#/about/intro" class="about">公司简介</a>
            <a href="/#/about/culture" class="wenhua">企业文化</a>
            <div class="line_right"></div>
        </div>
<!--        插件：公司简介卡片-->
       <div class="router">
           <router-view/>
       </div>
<!--        插件：疑问提交-->
        <question-ask/>
    </div>
</template>

<script>
    import $ from "jquery"
    export default {
        name: "aboutMain",
        components:{
            workCard:()=>import('./workCard'),
            questionAsk:()=>import('../../components/question/question'),
        },
        updated() {
            this.changeBackground();
        },
        mounted() {
            this.changeBackground();
        },
        methods:{
            changeBackground(){
                var path=this.$route.path+'';
                path=path.split('/')[2];
                if(path==='intro'){
                    console.log('公司简介');
                    $('.nav.about a')[0].click(()=>{
                        $('.nav.about a')[0].css({"background-position":"left","color":"#0595C7"})
                    });
                    // doc.css();
                    // console.log(doc);
                }else if(path==='culture'){
                    console.log('文化简介');
                    let doc=$('.nav.about a')[1];
                    // doc.css({"background-position":"left","color":"#0595C7"});
                    // console.log(doc);
                }else {
                    return null;
                }
                // console.log(path);
            }
        }
    }
</script>

<style lang="less" scoped>
    .aboutMain{
        width: 100%;
        height: 100%;
        min-width: 1300px;
        .start{
            height: 450px;
            background: url("../../assets/about/about.jpg") no-repeat;
            background-size: 100% 100%;
            box-sizing: border-box;
            padding: 150px 170px;
            h2{
                font-size: 30px;
                font-weight: 400;
                color: white;
            }
            .line_blue{
                height: 2px;
                background: #0595C7;
                width: 80px;
            }
            p{
                font-size: 15px;
                font-weight: 400;
                color: white;
                opacity: .8;
            }

        }
        .nav{
            height: 180px;
            /*width: 100%;*/
            width: 1500px;
            min-width: 1300px;
            box-sizing: border-box;
            padding: 20px 200px;
            display: flex;
            align-items: center;

            a:hover{
                background-position: left;
                color: #0595C7;
            }
            .line_left{
                width: 500px;
                float: left;
                height: 1px;
                background: #cccccc;
                margin-right: 15px;
            }
            .about{
                height: 80px;
                width: 85px;
                line-height: 80px;
                color: #aaaaaa;
                font-size: 13px;
                text-align: center;
                background: url("../../assets/about/title-img.jpg") no-repeat right;
                margin-right: 20px;
                /*transition: .5s ease-in-out;*/
            }
            .wenhua{
                .about();
                margin-right: 0;
                color: #aaaaaa;
                background: url("../../assets/about/title-img.jpg") no-repeat right;
                /*width: 100px;*/

            }
            .line_right{
                .line_left();
                margin-left: 15px;
            }

        }
    }
</style>
